<script setup lang="ts">
import { onMounted, ref, useTemplateRef } from 'vue';
import { Tabs } from '@ark-ui/vue/tabs';
import { useAppStore } from '@/mobile/stores/app';
import Recommend from './content/Recommend.vue';
import News from './content/News.vue';
import Repository from './content/Repository.vue';
import Organization from './content/Organization.vue';
import Developer from './content/Developer.vue';
import { useWindowScroll, watchThrottled } from '@vueuse/core';
import { useI18n } from 'vue-i18n';

const { t } = useI18n();
const { uiStore } = useAppStore()

const types = [
  {
    name: t('mobile.content.title1'),
    value: 'recommend',
    components: Recommend,
  },
  {
    name: t('mobile.content.title2'),
    value: 'news',
    components: News,
  },
  {
    name: t('mobile.content.title4'),
    value: 'repository',
    components: Repository,
  },
  {
    name: t('mobile.content.title3'),
    value: 'organization',
    components: Organization,
  },
  {
    name: t('mobile.content.title5'),
    value: 'developer',
    components: Developer,
  },
]

const fixed = ref(false);
const posRef = useTemplateRef('navigator-pos');
const { y } = useWindowScroll();

const gotoNavigator = () => {
  posRef.value?.scrollIntoView({
    behavior: 'instant',
    block: 'nearest',
  });
};

onMounted(() => {
  watchThrottled(y, (value) => {
    uiStore.tabsFixed = (value >= (posRef.value?.offsetTop ?? 0));
  }, {
    throttle: 10,
  });
})
</script>

<template>
  <div class="relative top--24" ref="navigator-pos"></div>
  <Tabs.Root default-value="recommend" id="page-home-content" lazy-mount :class="`${uiStore.tabsFixed ? 'mt-72' : 'mt-24'}`">
    <Tabs.List
      class="z-10 bg-#fff after:(absolute bottom-1 left-0 right-0 z10 h-1 bg-#f7f7f7 content-empty)"
      :class="[ uiStore.tabsFixed ? 'fixed top-48 left-0 right-0' : 'relative']"
    >
      <div class="tabs__nav relative flex select-none gap-x-24 overflow-x-auto overflow-y-hidden px-20 py-12">
        <Tabs.Trigger v-for="item in types" :key="item.value" :value="item.value" class="h-26 flex-shrink-0 bg-hex-fff text-16 text-#8B8B8B font-400" @click="gotoNavigator">
          {{ item.name }}
        </Tabs.Trigger>
        <Tabs.Indicator class="bottom-1 z-20 h-2 w-[var(--width)] bg-#3D7CFA" />
      </div>
    </Tabs.List>
    <Tabs.Content v-for="item in types" :key="item.value" :value="item.value" :class="[ fixed ? 'mt-50' : 'mt-0']">
      <component :is="item.components" :key="item.value" />
    </Tabs.Content>
  </Tabs.Root>
</template>

<style lang="scss" scoped>
[data-scope=tabs][data-part=trigger][data-selected] {
  color: #222226;
  font-weight: 600;
}

.tabs__nav::-webkit-scrollbar {
  display: none;
}
</style>
